<template>
	<view class="image-uploader">
		

		<!-- 上传区域 -->
		<view class="uploader-container">
			<!-- 已上传图片 -->
			<view class="uploaded-images">
				<view class="image-item" v-for="(image, index) in tempImages" :key="index">
					<image :src="image" mode="aspectFill"></image>
					<view class="delete-btn" @click="removeImage(index)">
						<text class="iconfont icon-delete"></text>
					</view>
				</view>
			</view>

			<!-- 上传按钮 -->
			<view v-if="images.length < maxCount" class="upload-btn" @click="chooseImage">
				<text class="iconfont icon-add"></text>
				<text>点击上传</text>
			</view>
		</view>

		<!-- 提示信息 -->
		<!-- <view class="uploader-tip">{{ tip || '最多上传' + maxCount + '张图片' }}</view> -->
	</view>
</template>

<script>
	export default {
		name: 'ImageUploader',
		props: {
			// 标题
			title: {
				type: String,
				default: ''
			},
			// 提示信息
			tip: {
				type: String,
				default: ''
			},
			// 最大上传数量
			maxCount: {
				type: Number,
				default: 1
			},
			// 初始图片列表
			images: {
				type: Array,
				default: () => []
			},
			// 上传路径
			uploadUrl: {
				type: String,
				default: 'https://jianxiangjinjiren.com/user/web/uploadImg',
				required: true
			},
			// 额外上传参数
			formData: {
				type: Object,
				default: () => ({
					'type': 7,
					'userId': 'US0794374616570269696',
				})
			}
		},
		data() {
			return {
				tempImages: [...this.images], // 临时图片列表
				uploading: false // 上传中状态
			};
		},
		watch: {
			images: {
				handler(newVal) {
					this.tempImages = [...newVal];
				},
				deep: true
			}
		},
		methods: {
			/**
			 * 选择图片
			 */
			chooseImage() {
				const count = this.maxCount - this.tempImages.length;
				if (count <= 0) return;

				uni.chooseImage({
					count,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.uploadImages(res.tempFilePaths);
					},
					fail: (err) => {
						console.error('选择图片失败', err);
					}
				});
			},

			/**
			 * 上传图片
			 */
			uploadImages(filePaths) {
				this.uploading = true;
				
				const uploadPromises = filePaths.map(filePath => {
					return new Promise((resolve, reject) => {
						uni.uploadFile({
							url: this.uploadUrl,
							filePath,
							name: 'imgFile',
							formData: {
								...this.formData
							},
							success: (res) => {
								const data = JSON.parse(res.data);
								if (data.status === 0) {
									console.log(data, 'data')
									resolve(data.content.imageURL);
								} else {
									reject(new Error(data.mes || '上传失败'));
								}

							},
							fail: (err) => {
								reject(err);
							}
						});
					});
				});

				Promise.all(uploadPromises)
					.then(urls => {
						// console.log(urls,'xxxxxxxxxxxxxxxx')
						this.tempImages = [...this.tempImages, ...urls];
						console.log(this.tempImages)
						this.$emit('change', this.tempImages);
						this.uploading = false;
					})
					.catch(err => {
						console.error('上传失败', err);
						uni.showToast({
							title: err.message || '上传失败',
							icon: 'none'
						});
						this.uploading = false;
					});
			},

			/**
			 * 删除图片
			 */
			removeImage(index) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这张图片吗？',
					success: (res) => {
						if (res.confirm) {
							this.tempImages.splice(index, 1);
							this.$emit('change', this.tempImages);
						}
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.image-uploader {
		padding: 15px;

		.uploader-title {
			font-size: 16px;
			color: #333;
			margin-bottom: 10px;
		}

		.uploader-container {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;

			.uploaded-images {
				display: flex;
				flex-wrap: wrap;
				gap: 10px;

				.image-item {
					position: relative;
					width: 80px;
					height: 80px;
					border-radius: 4px;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}

					.delete-btn {
						position: absolute;
						top: 0;
						right: 0;
						width: 20px;
						height: 20px;
						background-color: rgba(0, 0, 0, 0.6);
						color: white;
						display: flex;
						align-items: center;
						justify-content: center;
						cursor: pointer;
					}
				}
			}

			.upload-btn {
				width: 80px;
				height: 80px;
				border: 1px dashed #ccc;
				border-radius: 4px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: #999;
				cursor: pointer;

				.icon-add::before {
					content: '+';
					font-size: 24px;
				}
			}
		}

		.uploader-tip {
			font-size: 12px;
			color: #999;
			margin-top: 10px;
		}
	}
</style>